<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:include="front/fragments :: head(~{::title})">
    <link rel="stylesheet" type="text/css" href="/static/front/css/jqcloud.css"/>
    <style>
        .friends-container {
            margin-top: -100px;
            margin-bottom: 30px;
        }

        .friends-container .tag-title {
            margin-bottom: 10px;
            color: #3C4858;
            font-size: 1.75rem;
            font-weight: 400;
        }

        .frind-ship img {
            border-radius: 50%;
        }

        /* 一下是按钮样式 */

        .frind-ship {
            padding: 10px 20px;
        }

        .frind-ship .title {
            display: flex;
            align-items: center;
        }

        .frind-ship .title div {
            color: #fff;
            padding-left: 10px;
        }

        .frind-ship .title img {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
        }

        .frind-ship .title h1 {
            padding-bottom: 5px;
            border-bottom: 2px solid #fff;
            position: relative;
            top: -15px;
            left: 3px;
        }

        .friend-button {
            display: flex;
            justify-content: center;
            margin-bottom: -27px;
        }

        .friend-button a {
            border-radius: 40px;
        }

        .friend-all .tag-post {
            margin-bottom: 30px;
        }

        .button-caution {
            background-color: #FF4351;
            border-color: #FF4351;
            color: #FFF;
        }

        .button {
            font-weight: 300;
            font-size: 16px;
            font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            height: 40px;
            padding: 0 40px;
            margin: 0;
            display: inline-block;
            appearance: none;
            cursor: pointer;
            border: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition-property: all;
            transition-property: all;
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
        }

        .title {
            margin-bottom: 0rem !important;
        }

        .card {
            margin: 3rem 0 1rem 0 !important;
        }

        .button-glow.button-caution {
            -webkit-animation-name: glowing-caution;
            animation-name: glowing-caution;
        }

        @-webkit-keyframes glowing-caution {
            from {
                -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
                box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            }

            50% {
                -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
                box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
            }

            to {
                -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
                box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            }
        }

        @keyframes glowing-caution {
            from {
                -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
                box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            }

            50% {
                -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
                box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
            }

            to {
                -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
                box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            }
        }

        .button-caution:hover {
            background-color: #ff7680;
            border-color: #ff7680;
            color: #FFF;
            text-decoration: none;
        }

        .frind-card1 {
            background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
        }

        .frind-card2 {
            background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .frind-card3 {
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
        }

        .frind-card4 {
            background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
        }

        .frind-card5 {
            background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
        }

        .frind-card6 {
            background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
        }

        .frind-card7 {
            background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
        }

        .frind-card8 {
            background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
        }

        .frind-card9 {
            background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
        }

        .frind-card10 {
            background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
        }

        article .card {
            overflow: visible !important;
        }
    </style>
    <style>
        .valine-card {
            margin: 1.5rem auto;
        }

        .valine-card .card-content {
            padding: 20px 20px 5px 20px;
        }

        #vcomments textarea {
            box-sizing: border-box;
            background: url("/static/front/image/comment_bg.png") 100% 100% no-repeat;
        }

        #vcomments p {
            margin: 2px 2px 10px;
            font-size: 1.05rem;
            line-height: 1.78rem;
        }

        #vcomments blockquote p {
            text-indent: 0.2rem;
        }

        #vcomments a {
            padding: 0 2px;
            color: #4cbf30;
            font-weight: 500;
            text-decoration: none;
        }

        #vcomments img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }

        #vcomments ol li {
            list-style-type: decimal;
        }

        #vcomments ol,
        ul {
            display: block;
            padding-left: 2em;
            word-spacing: 0.05rem;
        }

        #vcomments ul li,
        ol li {
            display: list-item;
            line-height: 1.8rem;
            font-size: 1rem;
        }

        #vcomments ul li {
            list-style-type: disc;
        }

        #vcomments ul ul li {
            list-style-type: circle;
        }

        #vcomments table, th, td {
            padding: 12px 13px;
            border: 1px solid #dfe2e5;
        }

        #vcomments table, th, td {
            border: 0;
        }

        table tr:nth-child(2n), thead {
            background-color: #fafafa;
        }

        #vcomments table th {
            background-color: #f2f2f2;
            min-width: 80px;
        }

        #vcomments table td {
            min-width: 80px;
        }

        #vcomments h1 {
            font-size: 1.85rem;
            font-weight: bold;
            line-height: 2.2rem;
        }

        #vcomments h2 {
            font-size: 1.65rem;
            font-weight: bold;
            line-height: 1.9rem;
        }

        #vcomments h3 {
            font-size: 1.45rem;
            font-weight: bold;
            line-height: 1.7rem;
        }

        #vcomments h4 {
            font-size: 1.25rem;
            font-weight: bold;
            line-height: 1.5rem;
        }

        #vcomments h5 {
            font-size: 1.1rem;
            font-weight: bold;
            line-height: 1.4rem;
        }

        #vcomments h6 {
            font-size: 1rem;
            line-height: 1.3rem;
        }

        #vcomments p {
            font-size: 1rem;
            line-height: 1.5rem;
        }

        #vcomments hr {
            margin: 12px 0;
            border: 0;
            border-top: 1px solid #ccc;
        }

        #vcomments blockquote {
            margin: 15px 0;
            border-left: 5px solid #42b983;
            padding: 1rem 0.8rem 0.3rem 0.8rem;
            color: #666;
            background-color: rgba(66, 185, 131, .1);
        }

        #vcomments pre {
            font-family: monospace, monospace;
            padding: 1.2em;
            margin: .5em 0;
            background: #272822;
            overflow: auto;
            border-radius: 0.3em;
            tab-size: 4;
        }

        #vcomments code {
            font-family: monospace, monospace;
            padding: 1px 3px;
            font-size: 0.92rem;
            color: #e96900;
            background-color: #f8f8f8;
            border-radius: 2px;
        }

        #vcomments pre code {
            font-family: monospace, monospace;
            padding: 0;
            color: #e8eaf6;
            background-color: #272822;
        }

        #vcomments pre[class*="language-"] {
            padding: 1.2em;
            margin: .5em 0;
        }

        #vcomments code[class*="language-"],
        pre[class*="language-"] {
            color: #e8eaf6;
        }

        #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
            position: inherit;
            margin-left: -1.3rem;
            margin-right: 0.4rem;
            margin-top: -1px;
            vertical-align: middle;
            left: unset;
            visibility: visible;
        }

        #vcomments b,
        strong {
            font-weight: bold;
        }

        #vcomments dfn {
            font-style: italic;
        }

        #vcomments small {
            font-size: 85%;
        }

        #vcomments cite {
            font-style: normal;
        }

        #vcomments mark {
            background-color: #fcf8e3;
            padding: .2em;
        }

        #vcomments table, th, td {
            padding: 12px 13px;
            border: 1px solid #dfe2e5;
        }

        table tr:nth-child(2n), thead {
            background-color: #fafafa;
        }

        #vcomments table th {
            background-color: #f2f2f2;
            min-width: 80px;
        }

        #vcomments table td {
            min-width: 80px;
        }

        #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
            position: inherit;
            margin-left: -1.3rem;
            margin-right: 0.4rem;
            margin-top: -1px;
            vertical-align: middle;
            left: unset;
            visibility: visible;
        }
    </style>
    <!--打字机效果-->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script>
        $(function () {
            var typed = new Typed("#subtitle", {
                strings: ['能够通过人传授的智慧来躲避的困难实在少之又少。真正要掌握的，并不是有关某个问题的知识，而是寻找那个问题的方法。那样的东西可不是一朝一夕能掌握过来的。'],
                startDelay: 300,
                typeSpeed: 100,
                loop: true,
                backSpeed: 50,
                showCursor: true
            });
        });
    </script>
</head>


<body>
<!--header-->
<header th:replace="front/fragments :: header"></header>
<!--end header-->

<!--bgcover-->
<div th:replace="front/fragments :: bgcover"></div>
<!--end bgcover-->

<div id="app">
    <main class="content">
        <div class="container friends-container">
            <div class="card">
                <div class="card-content">
                    <div class="tag-title center-align">
                        <i class="fas fa-address-book"></i>&nbsp;&nbsp;友情链接
                    </div>
                    <article id="friends-link" style="position: relative;">
                        <div class="row tags-posts friend-all">
                            <div class="col s12 m6 l4 friend-div aos-init" data-aos="zoom-in-up"
                                 v-for="(friend, index) in friends" :key="friend.id">
                                <div class="card" :class="'frind-card'+(index+1)">
                                    <div class="frind-ship">
                                        <div class="title">
                                            <img :src="friend.avatar" alt="img">
                                            <div>
                                                <h1 class="friend-name">{{friend.nickname}}</h1>
                                                <p style="position: relative;top: -35px;">{{friend.introduction}}</p>
                                            </div>
                                        </div>
                                        <div class="friend-button">
                                            <a :href="friend.link" target="_blank"
                                               class="button button-glow button-rounded button-caution">
                                                前去学习
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
            <!--留言墙-->
            <div class="card">
                <div class="card valine-card aos-init aos-animate" data-aos="fade-up" id="message-area">
                    <div class="comment_headling"
                         style="font-size: 20px; font-weight: 700; position: relative; left: 20px; top: 15px; padding-bottom: 5px;">
                        <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
                        <span>留言墙</span>
                    </div>
                    <div id="message-form">
                        <input type="hidden" name="pid" v-model="message.pid"/>
                        <div id="vcomments" class="card-content v" style="display: grid">
                            <div class="vwrap">
                                <div class="vheader item3">
                                    <input name="nickname" placeholder="昵称(必填)" class="vnick vinput" type="text"
                                           required v-model="message.nickname"><input
                                        name="email" placeholder="邮箱(必填)" class="vmail vinput" type="email"
                                        required v-model="message.email"><input
                                        name="link" placeholder="网址(http://)" class="vlink vinput" type="text"
                                        v-model="message.link">
                                </div>
                                <div class="vedit">
                                        <textarea id="veditor" class="veditor vinput"
                                                  :placeholder="message.placeholder" name="content"
                                                  required v-model="message.content"></textarea>
                                </div>
                                <div class="vcontrol" style="float: right">
                                    <div class="col col-80 text-right">
                                        <button type="button" class="vsubmit vbtn" @click="saveMessage">回复</button>
                                    </div>
                                </div>
                                <div style="display:none;" class="vmark"></div>
                            </div>
                            <div class="vinfo" style="display:block;">
                                <div class="vcount col"><span class="vnum">{{message.total}}</span>&nbsp;留言</div>
                            </div>
                            <div class="center-align">
                                <div class="preloader-wrapper big active" v-show="loading">
                                    <div class="spinner-layer spinner-blue">
                                        <div class="circle-clipper left">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="gap-patch">
                                            <div class="circle"></div>
                                        </div>
                                        <div class="circle-clipper right">
                                            <div class="circle"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="vlist">
                                <div class="vcard" v-for="(message, index) in messages" :key="message.id"
                                     id="'message'+message.id">
                                    <img class="vimg" :src="message.avatar">
                                    <div class="vh">
                                        <div class="vhead">
                                            <a class="vnick" rel="nofollow"
                                               :href="message.link"
                                               target="_blank">{{message.nickname}}</a>
                                            <span class="vsys">{{message.browser}}</span>
                                            <span class="vsys">{{message.os}}</span>
                                            <span class="vsys">{{message.address}}</span>
                                        </div>
                                        <div class="vmeta">
                                            <span class="vtime">{{message.createTime | dateFormat}}</span>
                                            <span class="vat"
                                                  @click="reply(message.id, message.nickname)">回复</span>
                                        </div>
                                        <div class="vcontent">
                                            <p>{{message.content}}</p>
                                        </div>
                                        <div class="vquote"
                                             v-if="message.children !== undefined && message.children.length > 0">
                                            <div class="vcard" v-for="(child, index) in message.children"
                                                 :key="child.id">
                                                <img class="vimg"
                                                     :src="child.avatar">
                                                <div class="vh">
                                                    <div class="vhead">
                                                        <a class="vnick" rel="nofollow"
                                                           :href="child.link"
                                                           target="_blank">{{child.nickname}}</a>
                                                        <span class="vsys">{{child.browser}}</span>
                                                        <span class="vsys">{{child.os}}</span>
                                                        <span class="vsys">{{child.address}}</span>
                                                    </div>
                                                    <div class="vmeta">
                                                        <span class="vtime">{{child.createTime | dateFormat}}</span>
                                                        <span class="vat"
                                                              @click="reply(child.id, child.nickname)">回复</span>
                                                    </div>
                                                    <div class="vcontent">
                                                        <p>
                                                            <a class="at"
                                                               href="#">@{{child.parentMessage.nickname}}</a>&nbsp;&nbsp;{{child.content}}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="vempty" style="display:none;"></div>
                            <div class="vpage txt-center" v-if="message.current < message.pages">
                                <button type="button" class="vsubmit vbtn" @click="loadMore">加载更多</button>
                            </div>
                            <div class="info">
                                <div class="power txt-right">Powered By <a href="https://valine.js.org"
                                                                           target="_blank">Valine</a><br>v1.3.10
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!--footer-->
<footer th:replace="front/fragments :: footer"></footer>
<!--end footer-->

<!--commons-->
<div th:replace="front/fragments :: commons"></div>
<!--end commons-->

<!--scripts-->
<div th:replace="front/fragments :: scripts"></div>
<!--end scripts-->
<script src="/static/front/js/Valine.min.js"></script>
<!--vue-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            message: {
                pid: 0,
                nickname: '',
                email: '',
                link: '',
                content: '',
                placeholder: '你想要对博主说什么呢(必填)...',
                current: 1,
                pages: 0,
                total: 0,
                createTime: '',
            },
            messages: [],
            friend: {
                current: 1,
                pages: 0,
                total: 0,
            },
            friends: [],
            loading: false,
        },
        methods: {
            clearForm: function () {
                this.message.nickname = '';
                this.message.email = '';
                this.message.link = '';
                this.message.content = '';
            },
            loadMore: function () {
                this.message.current += 1;
                this.getMessages();
            },
            reply: function (messageId, nickname) {
                console.log(messageId)
                this.message.placeholder = '@' + nickname;
                this.message.pid = messageId;
                this.clearForm();
                $.scrollTo('#message-area', 500);
                $('#veditor').focus();
            },
            saveMessage: function () {
                let newMessage = {
                    'pid': this.message.pid,
                    'nickname': this.message.nickname,
                    'email': this.message.email,
                    'link': this.message.link,
                    'content': this.message.content,
                };
                this.loading = true;
                axios.post('/messages', newMessage,
                    {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                    })
                    .then((result) => {
                        setTimeout(() => {
                            this.loading = false;
                            this.current = 1;
                            this.content = '';
                            this.getMessages();
                        }, 1000);
                        this.message.content = '';
                        $.scrollTo('.vinfo', 500);
                    }).catch((error) => {
                    Swal.fire({
                        icon: 'error',
                        title: '提交失败！',
                        text: `${error.response.data.message}`,
                    });
                })
                return false;
            },
            getMessages: function () {
                axios({
                    url: '/messages/?current=' + this.message.current,
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    console.log(result.data.records)
                    this.message.current = result.data.current;
                    this.message.pages = result.data.pages;
                    this.message.total = result.data.total;
                    console.log(this.message)
                    if (this.message.current <= 1) {
                        this.messages = result.data.records;
                    } else {
                        this.messages = this.messages.concat(result.data.records);
                    }
                })
            },
            getLinks: function () {
                axios({
                    url: '/links/?current=' + this.friend.current,
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    this.friend.current = result.data.current;
                    this.friend.pages = result.data.pages;
                    this.friend.total = result.data.total;
                    if (this.friend.current <= 1) {
                        this.friends = result.data.records;
                    } else {
                        this.friends = this.friends.concat(result.data.records);
                    }
                })
            }
        },
        created() {
            this.getMessages();
            this.getLinks();
        },
        filters: {
            dateFormat: function (value) {
                return moment(value).fromNow();
            }
        },
    });
</script>
<!--弹出层-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
</body>
</html>
